<?php include_once 'header.php'; ?>
<style>
    .client-action {
        height: 25px !important;
        font-size: 10px !important;
        width: 10px !important;
        padding-top: 4px !important;
    }

    .client-discount-label {
        cursor: pointer;
    }
</style>
<script>
    var CLIENT_STATUS_PENDING = "<?php echo Agency::STATUS_PENDING ?>";
    var CLIENT_STATUS_APPROVED = "<?php echo Agency::STATUS_APPROVED ?>";
    var CLIENT_STATUS_BLOCKED = "<?php echo Agency::STATUS_BLOCKED ?>";
</script>
<aside class="right-side">
    <section class="content-header">
        <h1>
            Users
            <small> Client Management</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-users"></i> Users</a></li>
            <li class="active"> Management</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab_1" data-toggle="tab"><i class="fa fa-users"></i> Registered Users</a></li>
                        <li><a href="#tab_2" data-toggle="tab"> <i class="fa fa-male"></i> Unregistered Users</a></li>
                    </ul>
                    <div class="tab-content" style="min-height:400px">
                        <div class="tab-pane active" id="tab_1">
                            <table id="client-table" class="table table-hover">
                                <tr>
                                    <th style="width:60px;">Sr. No.</th>
                                    <th style="width:150px;">Date</th>
                                    <th style="width:300px;">Agency</th>
                                    <th style="width:180px;">Agent Name</th>
                                    <th style="width:70px;">Phone</th>
                                    <th style="width:100px;">Discount (%)</th>
                                    <th style="width:100px;">Status</th>
                                    <th>Action</th>
                                </tr>
                            </table>
                        </div><!-- /.tab-pane -->
                        <div class="tab-pane" id="tab_2">
                            <table id="user-table" class="table table-hover">
                                <tr>
                                    <th style="width:60px;">Sr. No.</th>
                                    <th style="width:150px;">Date</th>
                                    <th style="width:300px;">Agency</th>
                                    <th style="width:250px;">Agent Name</th>
                                    <th style="width:110px;">Phone</th>
                                    <th style="width:100px;">Discount (%)</th>
                                    <th>Action</th>
                                </tr>
                            </table>
                        </div><!-- /.tab-pane -->
                    </div><!-- /.tab-content -->

                </div>
            </div>
        </div>
    </section>
</aside>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Quick Email</h4>
            </div>
            <div class="modal-body">
                <form action="#" method="post">
                    <div class="form-group">
                        <input type="email" id="mailto" class="form-control" name="emailto" placeholder="Email to:"/>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="subject" placeholder="Subject"/>
                    </div>
                    <div>
                        <textarea class="editor" placeholder="Message"
                                  style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" id="sendEmail">Send <i class="fa fa-arrow-circle-right"></i></button>
                <button type="button" class=" pull-right btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<?php include 'footer.php'; ?>
<script>
    $(document).ready(function () {
        $(".loader").show();
        $.get("getClients",function (response) {
            if (!response.error) {
                for (var i = 0; i < response.data.length; i++) {
                    var agency = response.data[i];

                    var row = $("<tr></tr>");
                    $(row).append($("<td></td>").text(i + 1));
                    $(row).append($("<td></td>").text(moment(agency.dateCreate.date).format('lll')));
                    $(row).append($("<td></td>").text(agency.businessName));
                    $(row).append($("<td></td>").text(agency.firstName + " " + agency.lastName));
                    $(row).append($("<td></td>").text(agency.phone));

                    var discountCell = $("<td></td>");
                    discountCell.append($("<span class='client-discount-label' id='client-discount-label_" + agency.id + "'></span>").text(agency.discount));

                    var discountInput = $("<input></input>");
                    discountInput.attr("type", "text");
                    discountInput.attr("name", "client-discount-input");
                    discountInput.attr("id", "client-discount-input_" + agency.id);
                    discountInput.attr("placeholder", "Discount");
                    discountInput.css("display", "none");
                    discountInput.css("width", "80px");
                    discountInput.addClass("number-input client-discount-input");
                    discountCell.append(discountInput);
                    $(row).append(discountCell);
                    $(row).append($("<span id='client-email_" + agency.id + "'></span>").text(agency.email).hide());

                    var action = $("<td></td>");
                    if (agency.status == CLIENT_STATUS_APPROVED) {
                        $(row).append($("<td></td>").html("<span id='status_" + agency.id + "' class='label label-success'>Approved</span>"));
                        $(action).append("<button class='btn btn-danger ladda-button client-action client-block' data-style='slide-right' id='btn_" + agency.id + "'><i class='fa fa-times'/></button>");
                    } else if (agency.status == CLIENT_STATUS_BLOCKED) {
                        $(row).append($("<td></td>").html("<span id='status_" + agency.id + "' class='label label-danger'>Blocked</span>"));
                        $(action).append("<button class='btn btn-success ladda-button client-action client-approve' data-style='slide-right' id='btn_" + agency.id + "'><i class='fa fa-check'/></button>");
                    } else if (agency.status = CLIENT_STATUS_PENDING) {
                        $(row).append($("<td></td>").html("<span id='status_" + agency.id + "' class='label label-warning'>Pending</span>"));
                        $(action).append("<button class='btn btn-success ladda-button client-action client-approve' data-style='slide-right' id='btn_" + agency.id + "'><i class='fa fa-check'/></button>");
                    }
                    $(action).append("&nbsp;&nbsp;<button class='btn btn-default client-action client-mail' id='btn-mail_" + agency.id + "'><i class='fa fa-envelope'/></button>");
                    $(row).append(action);
                    $("#client-table").append(row);
                }
            } else {
                errorAlert(response.errorMessage);
            }
        }).always(function () {
                $(".loader").hide();
            });

        $.get("getUnregisteredClients",function (response) {
            if (!response.error) {
                for (var i = 0; i < response.data.length; i++) {
                    var agency = response.data[i];

                    var row = $("<tr></tr>");
                    $(row).append($("<td></td>").text(i + 1));
                    $(row).append($("<td></td>").text(moment(agency.dateCreate.date).format('lll')));
                    $(row).append($("<td></td>").text(agency.businessName));
                    $(row).append($("<td></td>").text(agency.firstName + " " + agency.lastName));
                    $(row).append($("<td></td>").text(agency.phone));


                    var discountCell = $("<td></td>");
                    var discountVal = agency.discount;
                    if(discountVal == null){
                        discountVal = 0;
                    }
                    discountCell.append($("<span class='client-discount-label' id='client-discount-label_" + agency.id + "'></span>").text(discountVal));

                    var discountInput = $("<input></input>");
                    discountInput.attr("type", "text");
                    discountInput.attr("name", "client-discount-input");
                    discountInput.attr("id", "client-discount-input_" + agency.id);
                    discountInput.attr("placeholder", "Discount");
                    discountInput.css("display", "none");
                    discountInput.css("width", "80px");
                    discountInput.addClass("number-input client-discount-input");
                    discountCell.append(discountInput);
                    $(row).append(discountCell);
                    $(row).append($("<span id='client-email_" + agency.id + "'></span>").text(agency.email).hide());

                    var action = $("<td></td>");
                    $(action).append("&nbsp;&nbsp;<button class='btn btn-default client-action client-mail' id='btn-mail_" + agency.id + "'><i class='fa fa-envelope'/></button>");
                    $(row).append(action);
                    $("#user-table").append(row);
                }
            } else {
                errorAlert(response.errorMessage);
            }
        }).always(function () {
                $(".loader").hide();
            });
    });

    $("body").on("click", "button.client-approve", function () {
        var id = getElementId($(this).attr("id"));
        var btn = Ladda.create(document.querySelector("#" + $(this).attr("id")));
        btn.start();
        $.get("changeClientStatus/" + id + "/" + CLIENT_STATUS_APPROVED,function (response) {
            if (!response.error) {
                $("#btn_" + id).removeClass("btn-success client-approve").addClass("btn-danger client-block").html("<i class='fa fa-times'/>");
                $("#status_" + id).addClass("label-success").text("Approved");
                $("#status_" + id).removeClass("label-danger");
                $("#status_" + id).removeClass("label-warning");
            } else {
                errorAlert(response.errorMessage);
            }
        }).always(function () {
                btn.stop();
            });
    });

    $("body").on("click", "button.client-block", function () {
        var id = getElementId($(this).attr("id"));
        var btn = Ladda.create(document.querySelector("#" + $(this).attr("id")));
        btn.start();
        $.get("changeClientStatus/" + id + "/" + CLIENT_STATUS_BLOCKED,function (response) {
            if (!response.error) {
                $("#btn_" + id).removeClass("btn-danger client-block").addClass("btn-success client-approve").html("<i class='fa fa-check'/>");
                $("#status_" + id).removeClass("label-success").addClass("label-danger").text("Blocked");
            } else {
                errorAlert(response.errorMessage);
            }
        }).always(function () {
                btn.stop();
            });
    });

    $("body").on("click", "span.client-discount-label", function () {
        var value = $(this).text();
        var id = getElementId($(this).attr("id"));
        $(this).hide();
        $("#client-discount-input_" + id).show().val(value);
    });

    $("body").on("keypress", "input.client-discount-input", function (e) {
        if (e.keyCode == 13) {
            var clientId = getElementId($(this).attr("id"));
            var value = $(this).val();
            $.get("updateClientDiscount/" + clientId + "/" + value, function (response) {
                if (!response.error) {
                    $("#client-discount-label_" + clientId).text(value);
                    $("#client-discount-input_" + clientId).hide();
                    $("#client-discount-label_" + clientId).show();
                } else {
                    errorAlert(response.errorMessage);
                }
            });
        }
    });


    $("body").on("click", "button.client-mail", function () {
        var id = getElementId($(this).attr("id"));
        $("#mailto").val($("#client-email_" + id).text());
        $('#myModal').modal('show');
    });
</script>